<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">
	
	<ui:define name="head">
		<style type="text/css">
			span {
				cursor:pointer;
			}
			
			span:hover {
				color:#FF9900;
			}
		</style>
	</ui:define>

	<ui:define name="content">

		<h1 class="title ui-widget-header ui-corner-all">ImageSwitcher - Effects Catalog</h1>
		<div class="entry">
			<p>ImageSwitch supports 25+ effects out of the box. Here are some of the effects in action.</p>

            <h3>Fade</h3>
			<p:imageSwitch effect="fade">
                <ui:repeat value="#{imageSwitchBean.images}" var="image">
                    <p:graphicImage value="/images/#{image}" />
                </ui:repeat>
			</p:imageSwitch>

            <h3>Zoom</h3>
            <p:imageSwitch effect="zoom">
                <ui:repeat value="#{imageSwitchBean.images}" var="image">
                    <p:graphicImage value="/images/#{image}" />
                </ui:repeat>
			</p:imageSwitch>

            <h3>TurnDown</h3>
            <p:imageSwitch effect="turnDown">
                <ui:repeat value="#{imageSwitchBean.images}" var="image">
                    <p:graphicImage value="/images/#{image}" />
                </ui:repeat>
			</p:imageSwitch>

            <h3>Shuffle</h3>
            <p:imageSwitch effect="shuffle">
                <ui:repeat value="#{imageSwitchBean.images}" var="image">
                    <p:graphicImage value="/images/#{image}" />
                </ui:repeat>
			</p:imageSwitch>

            <h3>Wipe with Manual Controls</h3>
            <span onclick="switcher.previous();">Previous</span>
			<span onclick="switcher.next();">Next</span>
            
            <p:imageSwitch effect="wipe" widgetVar="switcher" slideshowAuto="false">
                <ui:repeat value="#{imageSwitchBean.images}" var="image">
                    <p:graphicImage value="/images/#{image}" />
                </ui:repeat>
			</p:imageSwitch>
								
			<h3>Source</h3>
			<p:tabView>
				<p:tab title="imageSwitchEffect.xhtml">
                    <pre name="code" class="xml">

                    </pre>
				</p:tab>

                <p:tab title="ImageSwitchBean.java">
                    <pre name="code" class="xml">
package org.primefaces.examples.view;

import java.util.ArrayList;
import java.util.List;

public class ImageSwitchBean {

    private List&lt;String&gt; images;

    public ImageSwitchBean() {
        images = new ArrayList&lt;String&gt;();
        images.add("nature1.jpg");
        images.add("nature2.jpg");
        images.add("nature3.jpg");
        images.add("nature4.jpg");
    }

    public List&lt;String&gt; getImages() {
        return images;
    }
}
                    </pre>
				</p:tab>
			</p:tabView>
			
		</div>

	</ui:define>
</ui:composition>
